<template>
  <div class="classroom-status-details">
    <div class="edu-page-title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/classroomUseQuery' }">教室使用查询</el-breadcrumb-item>
        <el-breadcrumb-item>教学周状态明细</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="back">
        <el-button type="text" @click="goback">返回</el-button>
      </div>
    </div>
    <el-card shadow="never">
      <div v-for="item in totalDatas" :key="item.classroomBasicInfo.classroomName">
        <h2 class="text-center">同济大学教室课表</h2>
        <h3 class="text-center">{{item.classroomBasicInfo.calendarName}}</h3>
        <el-form :inline="true">
          <el-form-item label="教室：">
            <span>{{item.classroomBasicInfo.classroomName}}</span>
          </el-form-item>
          <el-form-item label="校区：">
            <span>{{item.classroomBasicInfo.campusI18n}}</span>
          </el-form-item>
          <el-form-item label="教学楼：">
            <span>{{item.classroomBasicInfo.towerName}}</span>
          </el-form-item>
          <el-form-item label="排考容量：">
            <span>{{item.classroomBasicInfo.examCapacity}}</span>
          </el-form-item>
          <el-form-item label="排课容量：">
            <span>{{item.classroomBasicInfo.classCapacity}}</span>
          </el-form-item>
        </el-form>
        <div class="lesson-table">
          <classTimetable
            :class-data="item.tempresultDatas"
            style="min-width:880px;"
            :cell-height="30"
            :color="color"
            :disable-time="disableTime"
            :showConflict="true"
            table-style="1"
            :legend= "{'bg2': '时间冲突'}"
            :multiStyle="false"
          >
            <!-- 不显示 但是要用 param-switch 组件加载配置数据 -->
            <span
              v-show="false"
              slot="legend"
              class="float-right"
              :title="$t('arrangement.tips.globalState')"
            >
              {{$t('arrangement.disable9')}}:
              <param-switch :code="restrictScope==1?'disable9_1':'disable9'" v-model="disable9"></param-switch>
            </span>
          </classTimetable>
        </div>
      </div>
      <div class="bottom-description">
        <div class="font-size-14">交互说明： </div>
          <div class="font-size-14">    1.若教室使用存在冲突，则显示红色底色。</div>
          <div class="font-size-14">    2.使用状态显示列表中，包括正常的排课、排考使用以及教室借用信息。其中使用信息中，若是“排考”使用前缀+△，若是“借用”使用前缀+▲</div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import * as API from "common/src/api/resource/classroom";
import classTimetable from "./classTimetable";
export default {
  name: "classroomStatusDetails",
  components: {
	  classTimetable
  },
  data() {
    return {
      queryParams: {
        ids: [],
        calendarId: ""
      },
      //节次表的颜色
      color: [
        "rgba(255,192,203,0.6)",
        "rgba(255,255,0,0.5)",
        "#C0C4CC",
        "#DCDFE6",
        "#C0C4CC"
      ],
      //安排排考的数据
      examData: [],
      disableTime: [],
      //安排考试的数据
      saved: [],
      classroomBasicInfo: [
        {
          classroomName: "",
          campusI18n: "",
          typeI18n: "",
          towerName: "",
          classCapacity: "",
          examCapacity: "",
          calendarName: ""
        }
      ],
      totalDatas: []
    };
  },
  methods: {
    goback() {
      this.$store.commit("delete_tabs", this.$route.fullPath);
      this.$router.push({
        path: "/classroomUseQuery"
      });
    },
    init() {
      let ids = this.$route.query.data.ids;
      let calendarId = this.$route.query.data.calendarId;
      let weekAt = this.$route.query.data.weekAt;
      if (!calendarId) {
        return;
      }
      this.queryParams = {
        ids: ids,
        calendarId: calendarId,
        weekAt: weekAt
      };
      API.classroomTeachingWeekDetail(this.queryParams).then(res => {
        if (res && res.code == 200) {
          let dataSize = res.data.size;
          if (dataSize > 0) {
            let tempData = res.data.data;
            //转换数据得到页面适配的结果
            let result = this.converClassroomData(tempData);
            if (!result.length){
              this.$message({
                type: "warning",
                message: "该教室的教学周无详细借用信息，请重新选择教室或教学周!"
              });
            }
            this.totalDatas = result;
          } else {
            this.$message({
              type: "warning",
              message: "该教室无详细借用信息，请重新选择教室!"
            });
            return;
          }
        } else {
          this.$message({ type: "error", message: res.msg });
        }
      });
    },
    //拼装数据
    converClassroomData(val) {
      let classroomDataList = [];
      val.forEach(element => {
        //1 初始化教室基本信息
        if (element) {
          let tempClassroomBasicInfo = {
            classroomName: element.classroomName,
            campusI18n: element.campusI18n,
            typeI18n: element.typeI18n,
            towerName: element.towerName,
            classCapacity: element.classCapacity,
            examCapacity: element.examCapacity,
            calendarName: element.calendarName
          };
          let tempClassroomOccupationList = element.classroomOccupationList;
          //2 添加排考占用的教室
          let tempresultDatas = [];
          for (let value of tempClassroomOccupationList.values()) {
            let occupiedExplain = "";
            if (value.usageCode == '02') {
              occupiedExplain = '+△' + value.occupiedExplain;
            } else {
              //借用的
              if (value.usageCode != '01') {
                occupiedExplain = '+▲' + value.occupiedExplain;
              } else {
                occupiedExplain= value.occupiedExplain;
              }
            }
            tempresultDatas.push({
              dayOfWeek: value.weekDay,
              timeStart: this.getTimeStart(value.timeBit),
              timeEnd: this.getTimeEnd(value.timeBit),
              value: occupiedExplain,
              popover: occupiedExplain,
              timeBit: value.timeBit,
              weekState:value.weekBit
            });
          }
          classroomDataList.push({
            classroomBasicInfo: tempClassroomBasicInfo,
            tempresultDatas: tempresultDatas
          });
        }
      });
      return classroomDataList;
    },
    getTimeStart(timeBit) {
      let timeStr = timeBit.toString(2);
      timeStr = timeStr.split("").reverse().join("");
      let index = timeStr.indexOf("1");
      return (parseInt(index)+1);
    },
    getTimeEnd(timeBit) {
      let timeStr = timeBit.toString(2);
      timeStr = timeStr.split("").reverse().join("");
      let index = timeStr.lastIndexOf("1");
      return (parseInt(index)+1);
    }
  },
  watch: {
    $route() {
      this.init();
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.classroom-status-details {
  .back {
    text-align: right;
    margin-bottom: 16px;
  }
}
.bottom-description{
  margin-top: 15px;
}
</style>

